<template>
	<view class="main">
		<view class="xbgf xp32 xmb20" v-for="(item,index) in recruit.list" :key="index" @click="toPage('/pages/join/detail/detail?id='+item.id)">
			<view class="xflex-x-between xai xpb40 xbb8D">
				<view class="">
					<view class="xfz36 xc3 xmb32">{{item.name}}</view>
					<view class="xfz28 xc9 xfw500">{{item.type}} {{item.city}}</view>
				</view>
				<view class="xfz36 xc3">{{item.num}}人</view>
			</view>
			<view class="xflex-x xmt20">
				<image class="rili" src="/static/image/icon_ysdd@2x.png" mode=""></image>
				<view class="xfz28 xc9">
					{{item.createtime_text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getRecruitLists
	} from "@/network/home.js"
	let test = ref('测试');

	let recruit = reactive({
		list: [],
		page: 1,
		show: false
	})

	const getRecruit = () => {

		getRecruitLists({
			page_no: recruit.page,
			page_size: '10'
		}).then(res => {
			recruit.list = res.data.lists
			recruit.page++
			if (res.data.lists.length < 10) {
				recruit.show = true
			}
		})
	}
	const toPage = (url) =>{
		uni.navigateTo({
			url:url
		})
	}
	onReachBottom(() => {
		if (recruit.show) return
		getRecruit()
	})

	onLoad(() => {
		getRecruit()
	})
</script>

<style lang="scss">
	.main {
		padding: 36rpx 25rpx;
	}

	.rili {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}
</style>